<!DOCTYPE html>
<html>

<head>
    <title>博客</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script type="application/x-javascript">
        addEventListener("load", function() {
            setTimeout(hideURLbar, 0);
        }, false);

        function hideURLbar() {
            window.scrollTo(0, 1);
        }
    </script>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
    <!-- js -->
    <script src="js/jquery-1.11.1.min.js"></script>
    <!-- //js -->
    <!-- start-smoth-scrolling -->
    <script type="text/javascript" src="js/move-top.js"></script>
    <script type="text/javascript" src="js/easing.js"></script>
    <script src="./js/vue.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $(".scroll").click(function(event) {
                event.preventDefault();
                $('html,body').animate({
                    scrollTop: $(this.hash).offset().top
                }, 1000);
            });
        });
    </script>
    <!-- start-smoth-scrolling -->
    <link href='http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'>
</head>

<body>
    <div id="app">
        <!-- header -->
        <div class="header">
            <div class="container">
                <div class="header-nav">
                    <nav class="navbar navbar-default">
                        <div class="navbar-header">
                            <a class="navbar-brand" href="index.html"><img src="images/logo.png"></a>
                        </div>
                        <div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1">
                            <ul class="nav navbar-nav">
                                <li class="hvr-bounce-to-bottom "><a href="index.html">主页</a></li>
                                <li class="hvr-bounce-to-bottom"><a href="about.html">关于</a></li>
                                <li class="hvr-bounce-to-bottom"><a href="menu.html">菜谱</a></li>
                                <li class="hvr-bounce-to-bottom active"><a href="blog.html">论坛交流</a></li>
                                <li class="hvr-bounce-to-bottom"><a href="contact.html">发布</a></li>
                                <li class="hvr-bounce-to-bottom "><a href="login.html" v-if="username==null">登录</a></li>
                                <li class="hvr-bounce-to-bottom"><a @click="logout"  >{{username}}</a></li>
                            </ul>
                        </div>
    
                    </nav>
                </div>
            </div>
        </div>
        <!-- //header -->
        <!-- blog -->
        <div class="blog-page">
            <div class="container">
                <div class="blog-pag" v-for="(item,index) in blog" :key="item.id">
                    <div class="blog-page-grids">
                        
                        <div class="blog-page-grid">
                            <h3><a :href="'./pages/singles/single1.html?id='+item.id">{{item.title}}</a></h3>
                            <p>发布于<span>{{item.created_time}}</span></p>
                        </div>
                        <div class="blog-page-grid1">
                            <p><a :href="'./pages/singles/single1.html?id='+item.id">去评论</a></p>
                        </div>
                        <div class="clearfix"> </div>
                    </div>
                    <div class="blog-page-grids-bottom">
                        
                        <div class="blog-page-grids-bot1">
                            <h4>{{item.theme}}</h4>
                            <p>{{item.desc}}</p>
                            <div class="more">
                                <a :href="'./pages/singles/single1.html?id='+item.id">了解更多</a>
                            </div>
                        </div>
                        <div class="clearfix"> </div>
                    </div>
                </div>
                
                
                <nav>
                    <ul class="pagination blg-pg">
                        <li><a  style="color: black;" @click="optPage(1)">首页</a></li>
                        <li><a  aria-label="Previous" @click="optPage(page-1)"><span aria-hidden="true">«</span></a></li>
                        <li><a  @click="optPage(list[0])">{{list[0]}}</a></li>
                        <li><a  @click="optPage(list[1])">{{list[1]}}</a></li>
                        <li v-if="list[2]" @click="optPage(list[2])"><a href="#">{{list[2]}}</a></li>
                        <li><a  aria-label="Next" @click="optPage(page+1)"><span aria-hidden="true">»</span></a></li>
                        <li><a  style="color: black;" @click="optPage(size)">尾页</a></li>
                    </ul>
                </nav>
            </div>
        </div>
        <!-- //blog -->
        <!--- footer --->
        <div class="footer">
            <div class="container">
                <div class="footer-grids">
                    <div class="col-md-3 footer-grid">
                        <h3>关于我们</h3>
                    </div>
                    <div class="col-md-3 footer-grid">
                        <h3>用户协议</h3>
                    </div>
                    <div class="col-md-3 footer-grid">
                        <h3>隐私政策</h3>
                    </div>
                    <div class="col-md-3 footer-grid">
                        <h3>客户端下载</h3>
                    </div>
                    <div class="clearfix"> </div>
                </div>
            </div>
        </div>
        <div class="clear"> </div>
        <div class="copy-right">
            <p>Copyright &copy; 2022.美食网站版权所有</p>
        </div>
    </div>
    <!--- //footer --->
    <!-- for bootstrap working -->
    <script src="js/bootstrap.js">
    </script>
    <!-- //for bootstrap working -->
</body>

</html>
<script>
    new Vue({
        el:"#app",
        data:{
            hello:"helloWorld",
            blog:[
                {
                    count:""
                }
            ],
            page:1,
            count:"",
            size:"",
            list:[1,2],
            counts:[],
            username:""
        },
        // 创建就运行
        async created() {
            this.isLogin()
            await this.getPageList()
            await this.getCount()
            this.pageSize()
            this.pageList(this.page)
           
        },
       
        // 方法
        methods: {
            // 退出登录
            logout(){
                sessionStorage.clear()
                window.location.reload()
            },
            //判断是否登录
            isLogin(){
                this.username = sessionStorage.getItem("username")
            },
            pageList(page){
                this.list = []
                const start = page - 1
                const end  = page + 1
                if(start!=0){
                    this.list.push(start)
                }
                this.list.push(page)
                if(end!=this.size){
                    this.list.push(end)
                }
            },
            pageSize(){
                this.size = Math.ceil(this.count/5)
            },
            // get请求
            async getPageList(){
                const response =  await fetch('http://127.0.0.1:5001/blog/list?page='+this.page)
                const data = await response.json();
                this.blog = await data.data
                for(var i = 0;i<=data.data.length;i++){
                    const count = await this.getCommentCount(data.data[i].id)
                    this.counts[i]= count
                }
            },
             // get请求
             async getCommentCount(id){
                const response =  await fetch('http://127.0.0.1:5001/comment/count?blog_id='+id)
                const data = await response.json();
                // 给数据赋值
                // this.counts =  data.data[0].count
                return data.data[0].count
                
            },
            async getCount(){
                const response =  await fetch('http://127.0.0.1:5001/blog/count')
                const data = await response.json();
                // 给数据赋值
                this.count =  data.data[0].count
            },
            optPage(page){
                if(page==0){
                    return
                }
                this.page = page
                this.pageList(page)
                this.getPageList()
            }
        }
    })
</script>